<template>
  <page-header-wrapper :title="false">
    <a-card
      :loading="loading"
      title="文章分类详情"
    >
      <a-form-model
        ref="articleForm"
        layout="vertical"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="articleRules"
        :model="articleForm"
      >
        <a-form-model-item label="上级分类" prop="pid">
          <a-select v-model="articleForm.pid">
            <a-select-option v-for="(item,index) in levelOpts" :key="index" :value="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="分类名称" prop="title">
          <a-input type="text" v-model="articleForm.title" />
        </a-form-model-item>
        <a-form-model-item label="分类标识（英文标识，只允许含有:英文、数字和中划线）" prop="name">
          <a-input type="text" v-model="articleForm.name" />
        </a-form-model-item>
        <a-form-model-item label="是否外链（如果不为外链请留空，外链直接填写地址(加http://或https://)）" prop="link">
          <a-input type="text" v-model="articleForm.link" />
        </a-form-model-item>
        <a-form-model-item label="SEO标题" prop="meta_title">
          <a-input type="text" v-model="articleForm.meta_title" />
        </a-form-model-item>
        <a-form-model-item label="SEO关键词（关键词之间用英文逗号分隔）" prop="keywords">
          <a-input type="text" v-model="articleForm.keywords" />
        </a-form-model-item>
        <a-form-model-item label="SEO描述" prop="description">
          <a-input type="textarea" v-model="articleForm.description" />
        </a-form-model-item>
        <a-form-model-item label="排序值（排序值越小越靠前）" prop="sort">
          <a-input type="text" v-model="articleForm.sort" />
        </a-form-model-item>
        <a-form-model-item label="状态" prop="status">
          <a-radio-group v-model="articleForm.status">
            <a-radio :key="index" :value="index" v-for="(item, index) in statusOpts">{{item}}</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-divider />
        <a-form-model-item style="text-align: right">
          <a-button type="primary" style="margin-right:5px" @click="confirmSend" v-if="!isEdit">确认添加</a-button>
          <a-button type="primary" style="margin-right:5px" @click="confirmSend1" v-else>保存修改</a-button>
          <a-button type="default" @click="reset">重置表单</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import { getArticleClassAdd, getArticleClassEdit, postArticleClassAdd, postArticleClassEdit } from '@/api/article'

  export default {
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    name: 'ArticleClassDetail',
    data () {
      return {
        labelCol: { span: 0 },
        wrapperCol: { span: 10 },
        articleForm: {},
        articleRules: {
          pid: [{ required: true, message: '必须选择上级分类', trigger: 'blur' }],
          title: [{ required: true, message: '必须填写分类名称', trigger: 'blur' }],
          name: [{ required: true, message: '必须填写分类标识', trigger: 'blur' }]
        },
        levelOpts: [],
        statusOpts: {},
        loading: true
      }
    },
    activated () {
      if (this.isEdit) {
        this.getEdit(this.$route.params.id)
      } else {
        this.getAdd()
      }
    },
    methods: {
      getAdd () {
        const app = this
        getArticleClassAdd().then(res => {
          app.levelOpts = res.result.level
          app.statusOpts = res.result.statusOpts
        }).finally(() => {
          app.loading = false
        })
      },
      getEdit (id) {
        const app = this
        getArticleClassEdit(id).then(res => {
          app.articleForm = res.result.articleCat
          app.levelOpts = res.result.level
          app.statusOpts = res.result.statusOpts
          app.articleForm['status'] = (res.result.articleCat.status).toString()
        }).finally(() => {
          app.loading = false
        })
      },
      confirmSend () {
        const app = this
        const data = {}
        app.$refs.articleForm.validate(valid => {
          if (valid) {
            app.$confirm({
              title: '确认添加此分类吗',
              onOk: () => {
                for (const k in app.articleForm) {
                  data['articleCat[' + k + ']'] = app.articleForm[k]
                }
                data['pid'] = app.articleForm.pid
                postArticleClassAdd(data).then(res => {
                  if (res.status === 0) {
                    app.$message.success('添加成功')
                    app.articleForm = {}
                    app.$router.push({ name: 'ArticleClass' })
                  } else {
                    app.$warning({
                      title: res.msg
                    })
                  }
                })
              }
            })
          } else {
            return false
          }
        })
      },
      confirmSend1 () {
        const app = this
        const data = {}
        app.$refs.articleForm.validate(valid => {
          if (valid) {
            app.$confirm({
              title: '确认修改此分类吗',
              onOk: () => {
                for (const k in app.articleForm) {
                  data['articleCat[' + k + ']'] = app.articleForm[k]
                }
                postArticleClassEdit(app.articleForm.id, data).then(res => {
                  if (res.status === 0) {
                    app.$message.success('修改成功')
                    app.$router.push({ name: 'ArticleClass' })
                  } else {
                    app.$warning({
                      title: res.msg
                    })
                  }
                })
              }
            })
          } else {
            return false
          }
        })
      },
      reset () {
        this.articleForm = {}
      }
    }
  }
</script>

<style scoped>

</style>
